<script setup lang="ts">
import type { Option } from '#/api';

import { computed } from 'vue';

import { useDictStore } from '#/store';

import { ApiCheckboxGroup, ApiRadioGroup, ApiSelect } from '..';

interface Props {
  // 组件类型
  renderType?: 'CheckboxGroup' | 'RadioGroup' | 'Select';
  // 其他参数
  params?: Object;
  // 字典类型或枚举类型
  type: string;
  // 扩展条目 如：在下拉框里面新增一个选项： 所有
  extend?: Option;
  // 扩展条目放在第一位还是最后一位
  extendFirst?: boolean;
  // 需要排除的字典条目或枚举条目
  excludes?: string[];
}
const props = withDefaults(defineProps<Props>(), {
  renderType: 'Select',
  params: () => ({}),
  extend: undefined,
  extendFirst: true,
  excludes: () => [],
});

const DictComponent = computed(() => {
  if (props.renderType === 'RadioGroup') {
    return ApiRadioGroup;
  } else if (props.renderType === 'CheckboxGroup') {
    return ApiCheckboxGroup;
  }
  return ApiSelect;
});
const dictStore = useDictStore();
const fetch = () => {
  return Promise.resolve(dictStore.getDictItemOptionList(props.type));
};
</script>
<template>
  <DictComponent :api="fetch" result-field="data" />
</template>
